<template>
	<view class="page">
		<view class="container">
			<view class="title">今日访问数据</view>
			<view class="sub-title">数据时间 2024/04/08 12:00</view>
			<view class="echarts-container">
				<echarts :option="lineOption" canvasId="echarts1"></echarts>
			</view>
		</view>

		<view class="container">
			<view class="title">今日访问数据</view>
			<view class="sub-title">数据时间 2024/04/08 12:00</view>
			<view class="echarts-container" style="margin-top:-15%">
				<echarts :option="pieOption" canvasId="echarts2"></echarts>
			</view>
		</view>

		<view class="container">
			<view class="title">今日访问数据</view>
			<view class="sub-title">数据时间 2024/04/08 12:00</view>
			<view class="echarts-container">
				<echarts :option="barOption" canvasId="echarts3"></echarts>
			</view>
		</view>

	</view>
</template>

<script>
import echarts from "../../components/echarts-uniapp/echarts-uniapp.vue"
export default {
	data() {
		return {
			lineOption: {},
			pieOption: {},
			barOption: {},
		}
	},
	components: {
		echarts
	},
	mounted() {
		this.configLineOption();
		this.configPieOption();
		this.configBarOption();
	},
	methods: {
		configLineOption() {
			this.lineOption = {
				grid: {
					// 设置上下左右的边距
					top: "10%",
					bottom: "5%",
					left: "0%",
					right: "0%",
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line',
						smooth: true
					}
				]
			};
		},
		configPieOption() {
			this.pieOption = {
				tooltip: {
					trigger: 'item',
					position: ['30%', '40%'],
					formatter: function (params) {
						// 自定义 tooltip 文本内容, params.marker 是前面的小圆点
						return params.marker + params.name + ': ' + params.value;
					}
					// formatter: "{b}\n {c} | ({d}%)"
				},
				legend: {
					bottom: 0,
					left: 'center',
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['50%', '60%'],//数据定死
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 0,
							borderColor: '#fff',//描边颜色
							borderWidth: 2//描边宽度
						},
						label: {
							// 饼图上的文本标签
							show: false,
							position: 'center'
						},
						emphasis: {
							itemStyle: {
								// shadowBlur: 10,
								// shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						labelLine: {
							show: false
						},
						data: [
							// 指定每个数据项的名称，这时候需要每个项为一个对象：
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Android' },
							{ value: 580, name: 'iPhone' },
							{ value: 484, name: 'Windows PC' },
							{ value: 300, name: 'Android Pad' }
						]
					}
				]
			};
		},
		configBarOption() {
			this.barOption = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
				},
				series: [
					{
						name: '2011',
						type: 'bar',
						data: [18203, 23489, 29034, 104970, 131744, 630230]
					},
				]
			};
		}
	}
}
</script>

<style scoped>
.page {
	padding: 20rpx 0;
	background-color: #f7f7f7;
}

.title {
	color: black;
}

.sub-title {
	margin: 10rpx 0;
	font-size: small;
	color: gray;
}

.container {
	margin: 20rpx 0;
	padding: 20rpx;
	background-color: white;
}

.echarts-container {
	width: 100%;
	height: 50vh;
	/* background-color: lightblue; */
}
</style>